<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<el-card shadow="never" class="welcome">
					<el-avatar size="large" src="/img/logo.png"/>
					<div class="tip-body">
						<div class="tip-title">{{ getTipTitle() }}</div>
						<div class="tip-desc">
							<a target="_balnk" href="https://gitee.com/cclayman/layman-admin">Layman-Admin</a>
							基于FC-Admin,SCUI改进而来,使用PHP+Laravel实现服务端。
							<a target="_balnk" href="https://github.com/lfcleo/fc-admin">鸣谢 FC-Admin</a>、
							<a target="_balnk" href="https://gitee.com/lolicode/scui">鸣谢 SCUI</a>提供如此精美页面和前沿技术。
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
				<el-card shadow="never" class="vab-card vab-card-primary">
					<fc-statistic title="新增用户" :value="dashboardUser?.today + ''" groupSeparator style="color: white;">
<!--						<fc-trend v-model="trendValue1"></fc-trend>-->
					</fc-statistic>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
				<el-card shadow="never" class="vab-card">
					<fc-statistic title="昨日新增" :value="dashboardUser?.yesterday + ''" groupSeparator>
<!--						<fc-trend v-model="trendValue1"></fc-trend>-->
					</fc-statistic>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
				<el-card shadow="never" class="vab-card">
					<fc-statistic title="本月新增" :value="dashboardUser?.month + ''" groupSeparator>
						<!--						<fc-trend v-model="trendValue1"></fc-trend>-->
					</fc-statistic>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
				<el-card shadow="never" class="vab-card">
					<fc-statistic title="总用户" :value="dashboardUser?.total + ''" groupSeparator>
<!--						<fc-trend v-model="trendValue1"></fc-trend>-->
					</fc-statistic>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<el-card shadow="never" class="vab-card">
					<template #header>
						<div class="vab-card-header">
							<el-icon>
								<EditPen/>
							</el-icon>
							<div>待处理</div>
							<el-badge :value="12"></el-badge>
						</div>
					</template>
					<template #default>
						<div>处理信息1</div>
						<div>处理信息2</div>
						<div>处理信息3</div>
						<div>处理信息4</div>
					</template>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<el-card shadow="never" class="vab-card">
					<template #header>
						<div class="vab-card-header">
							<el-icon>
								<Message/>
							</el-icon>
							<div>信息</div>
						</div>
						<el-tag type="success">当前版本：{{ packageJson.version }}。更新时间：2024-10-06</el-tag>
					</template>
					<template #default>
						<el-descriptions border :column="3">
							<el-descriptions-item label="vue">
								{{ packageJson.dependencies.vue }}
							</el-descriptions-item>
							<el-descriptions-item label="element-plus">
								{{ packageJson.dependencies['element-plus'] }}
							</el-descriptions-item>
							<el-descriptions-item label="pinia">
								{{ packageJson.dependencies.pinia }}
							</el-descriptions-item>
							<el-descriptions-item label="vue-router">
								{{ packageJson.dependencies['vue-router'] }}
							</el-descriptions-item>
							<el-descriptions-item label="axios">
								{{ packageJson.dependencies.axios }}
							</el-descriptions-item>
							<el-descriptions-item label="vue-i18n">
								{{ packageJson.dependencies['vue-i18n'] }}
							</el-descriptions-item>
						</el-descriptions>
					</template>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<el-card shadow="never" class="vab-card">
					<template #header>
						<div class="vab-card-header">
							<el-icon>
								<DataLine/>
							</el-icon>
							<div>分析概览</div>
						</div>
					</template>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
				<el-card shadow="never" class="vab-card">
					<template #header>
						<div class="vab-card-header">
							<el-icon>
								<DataAnalysis/>
							</el-icon>
							<div>数据统计</div>
						</div>
					</template>
				</el-card>
			</el-col>
		</el-row>
	</el-main>

</template>

<script setup lang="ts">
import {useAuthStore} from '@/store/modules/auth';
import packageJson from '../../../package.json'
import {onMounted, ref} from 'vue';
import {getDashboardUserApi} from "@/api/modules/dashboard.ts";
import {DashboardUserModel} from "@/models/dashboardModel.ts";

const authStore = useAuthStore();
const dashboardUser = ref<DashboardUserModel | null>(null);

const getTipTitle = () => {
	const now = new Date();
	const hour = now.getHours();

	if (hour >= 6 && hour < 12) {
		return '上午好，' + authStore.userInfo.nickname + '。元气满满的早晨，加油哦。';
	} else if (hour >= 12 && hour < 18) {
		return '中午好，' + authStore.userInfo.nickname + '。忙碌了一上午，记得吃午饭哦。';
	} else {
		return '晚上好，' + authStore.userInfo.nickname + '。睡觉要有好梦。';
	}
}
const loadDashboardUser = async () => {
	const dashboardUserData = await getDashboardUserApi()
	dashboardUser.value = dashboardUserData.data;
};
onMounted(() => {
	loadDashboardUser();
});

</script>

<style scoped>
.welcome :deep(.el-card__body) {
	display: flex;
	flex-direction: row;
	align-items: center;
	background: var(--el-color-white) linear-gradient(120deg, var(--el-color-primary-light-9) 10%, var(--el-color-white)) no-repeat;
}

.welcome .tip-body {
	margin-left: 20px;
}

.welcome .tip-body .tip-title {
	font-weight: 700;
	font-size: 18px;
	line-height: 30px;
}

.welcome .tip-body .tip-desc {
	margin-top: 3px;
}

.welcome .tip-body .tip-desc a {
	color: var(--el-color-primary);
}

.vab-card :deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	font-size: 14px;
}

.vab-card-primary {
	color: var(--el-color-white);
	background: linear-gradient(90deg, var(--el-color-primary-light-4), var(--el-color-primary));
}

.vab-card :deep(.el-card__header) {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.vab-card .vab-card-header {
	display: flex;
	align-items: center;
}

.vab-card .vab-card-header .el-icon {
	margin-right: 5px;
	color: var(--el-color-primary);
}
</style>